<template>
	<view style="text-align: center;padding: 20rpx;">
		<text style="font-size: 40rpx;font-weight: 500;color: #FFFFFF;">待付款</text>
		<view style="margin-top: 20rpx;">
			<text style="font-size: 28rpx;font-weight: 500;color: #FFFFFF;">请尽快完成付款，晚了就没座位了哦，还剩</text>
			<u-count-down :timestamp="timestamp" :show-days="false" :show-hours="false" color="#ffffff" separator="zh"
				bg-color="#505050" separator-color="#ffffff" @end="cancel()"></u-count-down>
		</view>
		<view style="margin-top: 20rpx;">
			<u-button shape="circle" size="medium" :custom-style="customStyle" @click="cancelor">取消订单</u-button>
			<u-button shape="circle" size="medium" :hair-line="false" :custom-style="customStyle1" @click="gopay()">立即付款</u-button>
		</view>
		<view
			style="margin-top: 30rpx;padding: 30rpx;border-radius: 15rpx;height: 100%;width: 100%;background-color: #FFFFFF;">
			<view style="display: flex;width: 100%;">
				<view style="display: block;text-align: left;width: 600rpx;">
					<view class="">
						<text style="font-size: 36rpx;font-weight: 500;">{{info.filmName}}</text>
						<text style="font-size: 36rpx;font-weight: 500;margin-left: 15rpx;">{{info.count}}张</text>
						<!-- <u-tag :text="info.count+'张'" shape="square" type="error" size="mini" style="margin-left: 15rpx;" /> -->
					</view>
					<view class="">
						<text style="font-size: 25rpx;font-weight: 500;">{{info.showTime | formatDate(info.duration)}}</text>
					</view>
					<view class="">
						<text style="font-size: 25rpx;font-weight: 500;">{{info.cinemaName}}</text>
					</view>
					<view class="">
						<text style="font-size: 25rpx;font-weight: 500;">{{info.hallName}}</text>
					</view>
					<view class="">
						<text style="font-size: 25rpx;font-weight: 500;color: #a2a2a2;">{{info.selectSeat |formatInfo}}</text>
					</view>
				</view>
				<view style="float: right;flex: 1;">
					<u-image width="120rpx" height="180rpx" :src="info.filmImage" border-radius="10"></u-image>
				</view>
			</view>
			<view style="display: flex;width: 100%;height: 40rpx;margin-top: 30rpx;">
				<view
					style="flex-shrink: 0;width: 30rpx;height:30rpx;background-color: #505050;border-radius: 50%;margin-left: -45rpx;">

				</view>
				<view style="width: 647rpx;flex-shrink: 0;">
					<u-line border-style="dashed" margin="15rpx 20rpx" />
				</view>
				<view
					style="flex-shrink: 0;width: 30rpx;height:30rpx;background-color: #505050;border-radius: 50%;margin-left:38rpx;">

				</view>
			</view>
			<view style="text-align: left;" class="hide">
				<text style="font-size: 36rpx;font-weight: 500;">{{info.cinemaName}} </text>
			</view>
			<view style="text-align: left;margin-top: 15rpx;" class="hide">
				<text style="font-size: 30rpx;color: #939393;">{{address}}</text>
			</view>
			<u-line border-style="dashed" margin="30rpx 0rpx" />
			<view style="text-align: left;">
				<text style="font-size: 36rpx;font-weight: 500;">实付金额：￥{{info.price}}</text>
			</view>
			<view style="text-align: left;margin-top: 15rpx;">
				<text style="font-size: 30rpx;color: #939393;">订单号：</text>
				<text style="font-size: 26rpx;color: #939393;">{{info.tradeNum}}</text>
			</view>
			<view style="text-align: left;margin-top: 15rpx;">
				<text style="font-size: 30rpx;color: #939393;">购买时间：{{info.expireDate}}</text>
			</view>
			<view style="text-align: left;margin-top: 15rpx;">
				<text style="font-size: 30rpx;color: #939393;">手机号：{{info.mobile}}</text>
			</view>
			<view style="text-align: left;margin-top: 15rpx;">
				<text style="font-size: 30rpx;color: #939393;">电影票由票司令提供</text>
			</view>
			<u-line border-style="dashed" margin="30rpx 0rpx" />
			<view style="text-align: left;">
				<text style="font-size: 36rpx;font-weight: 500;">观影须知</text>
			</view>
			<view style="text-align: left;margin-top: 15rpx;line-height: 45rpx;">
				<text style="color: rgba(153, 153, 153, 1);">{{gyxz}}</text>
			</view>
		</view>
		<u-modal v-model="qxshow" content="是否取消此订单" @cancel="cancel()" confirm-text="再想想" cancel-text="取消"
			:show-confirm-button="true" :show-cancel-button="true"> </u-modal>
	</view>
</template>
<script>
	import Config from '../../common/config.js';
	export default {
		data() {
			return {
				qxshow:false,
				info:{},
				gyxz:"1.请提前到达影院现场，找到自助取票机，打印纸质电影票，完成取票。\n2.如现场自助取票机无法打印电影票，请联系影院工作人员处理。\n3.凭打印好的纸质电影票，检票入场观影。\n4.如果订单使用了兑换券，或购买了特殊场次，暂不支持退票和改签。\n5.如有开具所购电影票发票的需求，请保留好电影票根，尽量在观影当天联系影城工作人员进行开具，如遇特殊情况请及时联系淘票票人工客服咨询。\n6.改签、退票服务由影城决定，特殊场次及使用兑换券的场次不支持改签、退票。",
				src: "http://film-image.piaosiling.com/film/2021/28511-SPhoto.jpg",
				customStyle: {

					color: '#FFFFFF',
					backgroundColor: '#505050',

				},
				customStyle1: {
					color: '#FFFFFF',
					backgroundColor: '#ababab',
					marginLeft: '20rpx'

				},
				timestamp: 0,
				address:""
			}
		},
		filters:{
			formatesj:function (timelong, times) {
				timelong = timelong.replace(/分钟/g,'')
				let hours = times.split(" ")[1].split(":")[0]
				let mins = times.split(" ")[1].split(":")[1]
				let startTime = hours + ":" + mins
				let tmphours = parseInt(timelong / 60) + parseInt(hours)
				let tmpmins = timelong % 60 + parseInt(mins)
				if (tmpmins >= 60) {
					tmphours++
					tmpmins = tmpmins - 60
				}
				if (tmphours >= 24) {
					tmphours = tmphours - 24
				}
				if (tmpmins < 10) {
					tmpmins = '0' + tmpmins
				}
				if (tmphours < 10) {
					tmphours = '0' + tmphours
				}
				let endTime = tmphours + ":" + tmpmins
				let a =startTime +" - " + endTime
					
				return a;
			},
			formatInfo: function(seatinfo) {
				seatinfo = seatinfo+""
				let a = seatinfo.split(',')
				let b = ''
				for (var i = 0; i < a.length; i++) {
					b = b + a[i].replace(/:/g, "排") + "座 "
				}
				return b
			},
			formatDate: function(value,timelong) {
				value = value+""
				value = value.replace(/-/g, "/");
				value = value+""
				timelong =timelong+""
				timelong = timelong.replace(/分钟/g,'')
				let hours = value.split(" ")[1].split(":")[0]
				let mins = value.split(" ")[1].split(":")[1]
				let startTime = hours + ":" + mins
				let tmphours = parseInt(timelong / 60) + parseInt(hours)
				let tmpmins = timelong % 60 + parseInt(mins)
				if (tmpmins >= 60) {
					tmphours++
					tmpmins = tmpmins - 60
				}
				if (tmphours >= 24) {
					tmphours = tmphours - 24
				}
				if (tmpmins < 10) {
					tmpmins = '0' + tmpmins
				}
				if (tmphours < 10) {
					tmphours = '0' + tmphours
				}
				let endTime = tmphours + ":" + tmpmins
				var date = new Date(value); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var nowT = new Date();
				var weekName = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
				if(nowT > date && date.toLocaleDateString() != nowT.toLocaleDateString()){
					var Y = date.getFullYear() + '年';
					var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
					var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + '日 ';
					var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
					var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
					//var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
					return Y + M + D + h + m +"-"+endTime;
				}else{
					if(date.getDate() == nowT.getDate()){
						var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
						var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
						return "今天 "+h + m+"-"+endTime
					}else if(date.getDate() == nowT.getDate()+1){
						var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
						var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
						return "明天 "+h + m+"-"+endTime
					}else if(date.getDate() == nowT.getDate()+2){
						var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
						var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
						return "后天 "+h + m+"-"+endTime
					}else if(date.getDate() == nowT.getDate()+3){
						var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
						var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
						return weekName[date.getDay()]+" "+h + m+"-"+endTime
					}else if(date.getDate() == nowT.getDate()+3){
						var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
						var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
						return weekName[date.getDay()]+" "+h + m+"-"+endTime
					}
				}
				
			},
		},
		onLoad() {
			this.info = uni.getStorageSync('ticketinfo')
			
			if(this.info.cinemaId !=""){
				
				this.getcinemainfo()
			}
			
			
		},
		methods: {
			cancelor(){
				this.qxshow=true
			},
			cancel() {
				let that = this;
				uni.request({
					url: Config.ServerIP + "/wxpay/app/pay/payOrder/cancel/" + that.info.tradeNum+'/6A510782BD7A439F994F8F25A99BEE52',
					method: "PUT",
					header: {
						Authorization: 'Bearer ' + Config.token
					},
					success: (resb) => {
						uni.navigateBack({
						    delta: 1
						});

					}
				})
			
			},
			gopay() {
				let that = this;
				let payinfo = JSON.parse(that.info.payParam)
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payinfo.timeStamp,
					nonceStr: payinfo.nonceStr,
					package: payinfo.package,
					signType: payinfo.signType,
					paySign: payinfo.paySign,
					success: function(resa) {
						uni.request({
							url: Config.ServerIP + "/wxpay/app/pay/payOrder/update/" + that.info.tradeNum,
							method: "PUT",
							header: {
								Authorization: 'Bearer ' + Config.token
							},
							success: (resb) => {
								// that.getOrderlist()
								// that.content = "支付成功"
								// that.show = true
								uni.requestSubscribeMessage({
								  tmplIds: ['ulMLPRXZuPauWmbgkJvs8x-V3du0UGvLccS1BKUm9mE','1zkPNp3eUi2KXnJ-NFrYHpfipBAU4PwIoVBRrLhGVHQ','k6GZgHJrVPitH31pm6PJSQQ7SwZSDGGzL63OBbncNhg'],
								  success () { 
									  uni.redirectTo({
									      url: '../orderlist/orderlist'
									  });
								  }
								})
							}
						})
			
					},
					fail: function(err) {
						that.content = "支付失败，跳转到订单"
						that.show = true
			
					}
				});
			},
			getcinemainfo(){
				let that =this;
				let jsonA = JSON.parse(that.info.payParam)
				
				let date = Date.parse(new Date()) / 1000;
				let timeStampA = parseInt(jsonA['timeStamp']);
				this.timestamp =  timeStampA + 300 - date
				
				uni.request({
					url: Config.ServerIP + "/movie/app/movie/cinemaInfo/" + that.info.cinemaId,
					success: (res) => {
				
						if (res.data.code != 200) {
							return
						}
						that.address = res.data.data.address	
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #505050;
	}
	.hide {
		display: -webkit-box;
		/*设置为弹性盒子*/
		-webkit-line-clamp: 1;
		/*最多显示1行*/
		overflow: hidden;
		/*超出隐藏*/
		text-overflow: ellipsis;
		/*超出显示为省略号*/
		-webkit-box-orient: vertical;
		/* 从上向下垂直排列子元素。 */
	}
</style>
